<template>
  <div class="footer_tabs">
    <div class="tabs_item" @click="handleSelectedIcon('/')">
      <i class="iconfont icon-shouye1 high_light" v-if="selectedIcon === '/'"></i>
      <i class="iconfont icon-shouye" v-else></i>
    </div>
    <div class="tabs_item" @click="handleSelectedIcon('/calendar')">
      <i class="iconfont icon-rili high_light" v-if="selectedIcon === '/calendar'"></i>
      <i class="iconfont icon-icon" v-else></i>
    </div>
    <div class="tabs_item" @click="handleSelectedIcon('/wallet')">
      <i class="iconfont icon-qianbao1 high_light" v-if="selectedIcon === '/wallet'"></i>
      <i class="iconfont icon-qianbao" v-else></i>
    </div>
    <div class="tabs_item" @click="handleSelectedIcon('/chart')">
      <i class="iconfont icon-tubiao high_light" v-if="selectedIcon === '/chart'"></i>
      <i class="iconfont icon-tubiaozhuzhuangtu" v-else></i>
    </div>
    <div class="tabs_item" @click="handleSelectedIcon('/personal')">
      <i class="iconfont icon-wode high_light" v-if="selectedIcon === '/personal'"></i>
      <i class="iconfont icon-wode1" v-else></i>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  name: 'FooterTabs',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const selectedIcon = computed(() => route.path)
    const handleSelectedIcon = (path: string) => {
      router.push(path)
    }
    return {
      selectedIcon,
      handleSelectedIcon
    }
  }
})
</script>

<style scoped>
  .footer_tabs {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 20px;
  }
  .tabs_item {
    width: 40px;
  }
  .high_light {
    color: #F9C3C2;
  }
</style>